/*
 * @Author: xiaosihan 
 * @Date: 2024-01-20 08:26:27 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2024-03-17 20:09:34
 */


import config from "@views/home/config/config";
import homeStore from "@views/home/homeStore";
import { Radio, Select, Slider } from "antd";
import clsx from "clsx";
import { autorun } from "mobx";
import { ReactNode, useEffect, useState } from "react";
import styles from "./contor.module.less";
import { BuildData, Project } from "@views/home/type";
import WindowsTypeModal from "./WindowsTypeModal/WindowsTypeModal";
import WindowsInstallModal from "./WindowsInstallModal/WindowsInstallModal";

interface Iprops {
    children?: ReactNode
}

// 控制器
export default function Contor(props: Iprops) {

    const [state, setState] = useState(homeStore.state);

    const [build, setBuild] = useState(homeStore.build);
    const [floorNum, setFloorNum] = useState(homeStore.buildDatas[homeStore.build].floorNum);
    const [windowNum, setWindowNum] = useState(homeStore.buildDatas[homeStore.build].windowNum);
    const [projects, setProjects] = useState<Array<Project>>(homeStore.projects);
    const [activeProjectId, setActiveProjectId] = useState(homeStore.activeProjectId);
    const [builds, setBuilds] = useState<Array<BuildData>>(homeStore.builds);
    const [activeBuildId, setActiveBuildId] = useState(homeStore.activeBuildId);

    useEffect(() => autorun(() => {
        setBuild(homeStore.build);
        setFloorNum(homeStore.buildDatas[homeStore.build].floorNum);
        setWindowNum(homeStore.buildDatas[homeStore.build].windowNum);
        setProjects(homeStore.projects);
        setActiveProjectId(homeStore.activeProjectId);
        setBuilds(homeStore.builds);
        setActiveBuildId(homeStore.activeBuildId);
        setState(homeStore.state);
    }), []);

    return (
        <div className={styles.contor} >

            <div className={styles.title} >详细信息</div>

            <table
                className={styles.table}
                border={1}
            >
                <tbody>
                    <tr>
                        <td width={120} align="center">
                            楼号
                        </td>
                        <td>
                            <Select
                                className={styles.select}
                                value={activeBuildId}
                                style={{ width: 120 }}
                                onChange={(buildId) => {
                                    homeStore.setActiveBuildId(buildId);
                                }}
                                options={
                                    builds.map(b => {
                                        return {
                                            value: b.buildId, label: b.buildNo
                                        };
                                    })
                                }
                            />
                        </td>
                    </tr>
                    <tr>
                        <td align="center">
                            查看状态
                        </td>
                        <td>
                            <Radio.Group
                                className={styles.radio_group}
                                options={[
                                    { label: '窗型信息', value: 'distribution' },
                                    { label: '安装状态', value: 'install' }
                                ]}
                                onChange={({ target: { value } }) => {
                                    homeStore.setState(value);
                                }}
                                value={state}
                                optionType="button"
                                buttonStyle="solid"
                            />
                        </td>
                    </tr>
                </tbody>
            </table>

            {state === "distribution" && <WindowsTypeModal />}
            {state === "install" && <WindowsInstallModal />}

        </div >
    );

}